<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="我的佣金" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<view class="jf-div">
				<image class="yue-bg" src="../../static/img/mine/yue-bg.png" mode=""></image>
				<view class="yue-div">
					<view class="">
						账户余额
					</view>
					<view class=" font_weight">
						<span class="u-font-32">￥</span>
						<span class="u-font-56">4,532.00</span>
					</view>
					<view class="flex u-m-t-24">
						<view class="">
							<view class="">
								已提现金额
							</view>
							<view class="font_weight">
								<span>￥</span>
								<span class="u-font-44">4,532.00</span>
							</view>
						</view>
						<view class="u-m-l-80">
							<view class="">
								未提现金额
							</view>
							<view class="font_weight">
								<span>￥</span>
								<span class="u-font-44">4,532.00</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="jilv">
			<view class="text-tx flex">
				提现记录
			</view>
			<view class="jl-item flex flex_sb" v-for="(item,index) in 5" :key="index">
				<view class="flex">
					<image class="tx-icon" src="../../static/img/mine/tixian-icon.png" mode=""></image>
					<view class="u-m-l-20">
						<view class="font_16_333 font_weight">
							提现
						</view>
						<view class="font_12_999 u-m-t-14">
							2023/07/15 11:11
						</view>
					</view>
				</view>
				<view class="">
					<span class="fh">￥</span>
					<span class="num">200.00</span>
					
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	
	.jilv{
		border-radius: 16rpx;
		background: #FFFFFF;
		width: 686rpx;
		margin: 20rpx auto;
		padding: 0 24rpx;
		.text-tx{
			font-weight: bold;
			border-bottom: 2rpx solid #EBEBEB;;
			font-size: 32rpx;
			color: #222222;
			height:112rpx;
		}
		.jl-item{
			// width: 686rpx;
			height: 142rpx;
			background: #FFFFFF;
			.tx-icon{
				width: 64rpx;
				height: 64rpx;
			}
			.fh{
				font-size: 24rpx;
				color: #FC3A30;
			}
			.num{
				font-size: 36rpx;
				color: #FC3A30;
			}
		}
	}
	
	.top-div {
		width: 750rpx;
		height: 300rpx;
		background: linear-gradient(180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254, 241, 226, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		

		.jf-div {
			position: relative;
			width: 750rpx;
			height: 274rpx;
			.yue-bg{
				width: 686rpx;
				height: 274rpx;
				position: absolute;
				top: 0;
				left: 32rpx;
			}
			
			.yue-div{
				width: 686rpx;
				height: 274rpx;
				position: absolute;
				top: 0;
				left: 32rpx;
				z-index: 2;
				padding: 24rpx 32rpx;
				color: #502C05;
				.u-font-56{
					font-size: 56rpx;
				}
				.u-font-44{
					font-size: 44rpx;
				}
			}
		}

		.jf-num {
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}

	}
</style>